<template>
  <div class="table-box">
    <ProTable title="按钮权限" :request-api="GetBtns" :columns="columns" ref="ProRef" :init-param="initParam">
      <template #tableHeader="scope">
        <el-button type="primary" @click="addBtn">新增按钮</el-button>
        <el-button type="danger" @click="deleteRowBtn(scope.selectedListIds)" :disabled="scope.selectedListIds.length === 0"
          >批量删除</el-button
        >
      </template>
      <template #operation="{ row }">
        <el-button link :icon="Edit" type="primary" @click="editRowBtn(row)">编辑</el-button>
        <el-button link :icon="Delete" type="primary" @click="deleteRowBtn([row.id])">删除</el-button>
      </template>
      <template #btnGroup="{ row }">
        {{ row.btnGroup }}
      </template>
    </ProTable>
    <BtnDrawer ref="BtnDrawerRef"></BtnDrawer>
  </div>
</template>

<script setup lang="ts">
import { Edit, Delete } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { GetBtns, GetBtnsGroup, DeleteBtn } from "@/api/modules/routes";
import { ColumnProps } from "@/components/ProTable/interface";
import { reactive, ref } from "vue";
import BtnDrawer from "./components/BtnDrawer.vue";
import { useHandleData } from "@/hooks/useHandleData";

const initParam = reactive({ pageSize: 50, pageNum: 1 });

const columns: ColumnProps[] = [
  { type: "selection", width: 80 },
  { prop: "btnName", label: "按钮名称", search: { el: "input" } },
  { prop: "btnTag", label: "按钮标签", search: { el: "input" } },
  {
    prop: "btnGroup",
    label: "按钮分类",
    search: { el: "select" },
    enum: GetBtnsGroup,
    fieldNames: { label: "btnGroup", value: "btnGroup" }
  },
  { prop: "remark", label: "备注" },
  { prop: "operation", label: "操作", width: 250 }
];

const ProRef = ref<InstanceType<typeof ProTable>>();

// -------------抽屉
const BtnDrawerRef = ref<InstanceType<typeof BtnDrawer> | null>();

const addBtn = () => {
  const params: any = {
    type: "add",
    rowData: undefined,
    api: ProRef.value?.getTableList
  };
  BtnDrawerRef.value?.acceptParams(params);
};

const editRowBtn = (row: any) => {
  const params: any = {
    type: "edit",
    rowData: row,
    api: ProRef.value?.getTableList
  };
  BtnDrawerRef.value?.acceptParams(params);
};

const deleteRowBtn = async (ids: any) => {
  await useHandleData(DeleteBtn, { ids }, "删除所选内容");
  ProRef.value?.getTableList();
};
</script>

<style></style>
